<template>
  <div>
    <q-card class="shadow-2">
      <q-card-section class="q-pa-sm">
        <div class="row items-center no-wrap relative-position">
          <div class="col-2">
            <q-chip square class="no-border-radius q-ml-none q-mr-none text-weight-bold">
              <q-avatar class="no-border-radius" icon="business" color="light-blue" text-color="white"></q-avatar>
              {{ baseInfoForm.code }}
            </q-chip>
          </div>
          <div class="col-2 name" style="position:relative;">
              <!-- <span class="col-4">选择地点:</span> -->
                <q-input
                placeholder="选择地点"
                disable
                outlined
                v-model="addOrEditForm.siteName"
                error-message="该字段为必填项"
                :error="$v.addOrEditForm.siteName.$error"
                @blur="$v.addOrEditForm.siteName.$touch"
                dense hint >
                <template v-slot:append>
                  <q-icon name="arrow_drop_down" />
                </template>
              </q-input>
              <div style="position: absolute;top:0px;width:100%;height:100%;height:50px;" @click="venDialog = true"></div>
          </div>
          <div class="col-8" align='right' style="padding-right:25px;">
            <q-btn outline label="返回" icon="" color="light-blue" :to="router.router"/>
          </div>
        </div>
      </q-card-section>
      <q-separator />
      <q-card-section  class="q-pa-sm">
        <main-field :form="baseInfoForm" :field="fieldConfig"></main-field>
      </q-card-section>
    </q-card>
      <q-dialog
        v-model="venDialog"
        persistent
        :maximized="maximizedToggle"
        transition-show="slide-up"
        transition-hide="slide-down">
        <q-card class="bg-white relative-position" style="min-width: 50vw">
          <q-bar class="bg-white q-py-lg">
            <strong>{{ '选择地点' }}</strong>
            <q-space />
            <q-btn dense flat icon="minimize" @click="maximizedToggle = false" :disable="!maximizedToggle">
              <q-tooltip v-if="maximizedToggle" content-class="bg-white text-primary">最小化</q-tooltip>
            </q-btn>
            <q-btn dense flat icon="crop_square" @click="maximizedToggle = true" :disable="maximizedToggle">
              <q-tooltip v-if="!maximizedToggle" content-class="bg-white text-primary">最大化</q-tooltip>
            </q-btn>
            <q-btn dense flat icon="close" @click="venDialog = false">
              <q-tooltip content-class="bg-white text-primary">关闭</q-tooltip>
            </q-btn>
          </q-bar>
          <q-separator />
          <q-card-section :style="maximizedToggle?'margin-bottom:53px;max-height:83.5vh': 'margin-bottom:53px;min-height:50vh;max-height:60vh'" class="scroll">
            <h-select-table url="/mdm/item/site/query" :id="id" @select="selectSiteId" :value="siteId"></h-select-table>
          </q-card-section>
          <q-separator class="absolute" style="bottom: 52px; left: 0"/>
          <q-card-actions align="right" class="absolute-bottom bg-white">
            <q-btn flat label="取消" color="primary" v-close-popup/>
            <q-btn flat label="保存" color="primary" :loading="loadingSave" @click="save"/>
          </q-card-actions>
        </q-card>
      </q-dialog>
  </div>
</template>

<script>
import { required } from 'vuelidate/lib/validators'
import HSelectTable from 'components/Common/side'
import MainField from 'src/pages/Common/SecondPackage/MainField/MainField'
export default {
  components: {
    HSelectTable,
    MainField
  },
  props: {
    id: {}
  },
  data () {
    return {
      venDialog: false,
      loadingSave: false,
      maximizedToggle: false,
      siteId: '',
      addOrEditForm: {
        siteName: ''
      },
      select: [],
      fieldConfig: [
        {
          name: 'name',
          label: '名称'
        },
        {
          name: 'createUserName',
          label: '创建人'
        },
        {
          name: 'createTime',
          label: '创建时间'
        },
        {
          name: 'lastUpdateTime',
          label: '上次更新时间'
        },
        {
          name: 'remark',
          label: '说明',
          type: 'textarea'
        }
      ],
      baseInfoForm: {
        name: '',
        code: '',
        nameEn: '',
        createUserName: '',
        createTime: '',
        lastUpdateTime: '',
        remark: ''
      }
    }
  },
  computed: {
    router () {
      return this.$store.state.router
    }
  },
  mounted () {
    // this.id = this.$store.state.router.id
    this.baseInfoGet()
  },
  validations: {
    siteId: { required },
    addOrEditForm: {
      siteName: { required }
    }
  },
  methods: {
    save () {
      this.venDialog = false
      console.log(this.select)
      if (this.select.length === 0) {
        this.siteId = ''
        this.addOrEditForm.siteName = ''
        this.$emit('selectSite', this.select)
      } else {
        this.siteId = this.select[0].id
        this.addOrEditForm.siteName = this.select[0].siteName
        this.$emit('selectSite', this.select)
      }
    },
    // close () {
    //   console.log(this.siteId.length)
    //   if (this.siteId.length === 0) {
    //     console.log('9999999999999999999')
    //     this.siteId = ''
    //     this.addOrEditForm.siteName = ''
    //   }
    // },
    selectSiteId (v) {
      this.select = v
      // console.log(v)
      // if (v.length === 0) {
      //   this.$emit('selectSite', v)
      // } else {
      //   this.siteId = v[0].id
      //   this.addOrEditForm.siteName = v[0].siteName
      //   this.$emit('selectSite', v)
      // }
    },
    baseInfoGet () {
      console.log(this.id)
      this.$api({
        method: 'get',
        url: `/mdm/item/findById/${this.id}`,
        successCallback: ({ data }) => {
          this.baseInfoForm = {
            name: String,
            code: String,
            nameEn: String,
            createUserName: String,
            createTime: String,
            lastUpdateTime: String,
            remark: String
          }
          this.baseInfoForm = { ...data }
        },
        errorCallback (err) {
          console.log('未处理的业务级error：', err)
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
  /deep/.name .q-field--dense .q-field__control, .q-field--dense .q-field__marginal
    height 32px
  /deep/.name .q-field--with-bottom
    padding-bottom 0px
</style>
